<template>
  <div style="width: 100%; height: 100%">
    <div class="content">
      <div class="show-info">
        <codes>
          <div slot="body">{{ code0 }}</div>
        </codes>
      </div>
      <div class="show-info">
        <h2>example1 基本例子 无限制</h2>
        <div class="test test1">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :fixedBox="option.fixedBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :centerBox="option.centerBox"
            :high="option.high"
            :infoTrue="option.infoTrue"
            :maxImgSize="option.maxImgSize"
            @realTime="realTime"
            @imgLoad="imgLoad"
            @cropMoving="cropMoving"
            :enlarge="option.enlarge"
            :mode="option.mode"
            :limitMinSize="option.limitMinSize"
          ></vueCropper>
        </div>
        <div class="test-button">
          <button @click="changeImg" class="btn">changeImg</button>
          <label class="btn" for="uploads">upload</label>
          <input
            type="file"
            id="uploads"
            style="position: absolute; clip: rect(0 0 0 0)"
            accept="image/png, image/jpeg, image/gif, image/jpg"
            @change="doUploadImg($event, 1)"
            ref="uploadImg"
          />
          <!-- <button @click="startCrop" v-if="!crap" class="btn">start</button>
          <button @click="stopCrop" v-else class="btn">stop</button>
          <button @click="clearCrop" class="btn">clear</button>
          <button @click="refreshCrop" class="btn">refresh</button>
          <button @click="changeScale(1)" class="btn">+</button>
          <button @click="changeScale(-1)" class="btn">-</button>
          <button @click="rotateLeft" class="btn">rotateLeft</button>
          <button @click="rotateRight" class="btn">rotateRight</button>
          <button @click="finish('base64')" class="btn">preview(base64)</button>
          <button @click="finish('blob')" class="btn">preview(blob)</button>
          <button @click="() => (option.img = '')" class="btn">清除图片</button> -->
          <a @click="down('base64')" class="btn">download(base64)</a>
          <!-- <a @click="down('blob')" class="btn">download(blob)</a> -->
          <a :href="downImg" download="demo.png" ref="downloadDom"></a>
        </div>

        <div class="pre">
          <!-- <section class="pre-item">
						<p>固定大小 固定宽度100px</p>
						<section v-html="previews.html"></section>
					</section> -->

          <section class="pre-item">
            <p>截图框大小</p>
            <div
              class="show-preview"
              :style="{
                width: previews.w + 'px',
                height: previews.h + 'px',
                overflow: 'hidden',
                margin: '5px',
              }"
            >
              <div :style="previews.div">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </div>
          </section>

          <section class="pre-item">
            <p>中等大小</p>
            <div :style="previewStyle1">
              <div :style="previews.div">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </div>
          </section>

          <section class="pre-item">
            <p>迷你大小</p>
            <div :style="previewStyle2">
              <div :style="previews.div">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </div>
          </section>
        </div>

        <section class="pre-item" title="zoom: (100 / previews.w)">
          <p>固定为100宽度</p>
          <div :style="previewStyle3">
            <div :style="previews.div">
              <img :src="previews.url" :style="previews.img" />
            </div>
          </div>
        </section>

        <section class="pre-item" title="zoom: (100 / previews.h)">
          <p>固定为100高度</p>
          <div :style="previewStyle4">
            <div :style="previews.div">
              <img :src="previews.url" :style="previews.img" />
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import "vue-cropper/dist/index.css";
import { nextTick, onMounted, reactive, ref } from "vue";

//组件中使用
import { VueCropper } from "vue-cropper";

const uploadImg = ref();
const cropper = ref();
const cropper2 = ref();
const cropper3 = ref();
const downloadDom = ref();

const model = ref(false);
const modelSrc = ref("");
const crap = ref(false);
const previews = ref({});
const lists = reactive([
  // {
  // 	img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
  // },
  {
    img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4",
  },
  {
    img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
  },
  {
    img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
  },
  {
    img: "http://cdn.xyxiao.cn/Landscape_3.jpg",
  },
  {
    img: "http://cdn.xyxiao.cn/Landscape_4.jpg",
  },
  {
    img: "http://cdn.xyxiao.cn/Portrait_1.jpg",
  },
  {
    img: "http://cdn.xyxiao.cn/Portrait_2.jpg",
  },
]);
const option = reactive({
  img: "",
  size: 1,
  full: false,
  outputType: "png",
  canMove: true,
  fixedBox: false,
  original: false,
  canMoveBox: true,
  autoCrop: true,
  // 只有自动截图开启 宽度高度才生效
  autoCropWidth: 200,
  autoCropHeight: 150,
  centerBox: false,
  high: false,
  cropData: {},
  enlarge: 1,
  mode: "contain",
  maxImgSize: 3000,
  limitMinSize: [100, 120],
});
const example2 = ref({
  img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
  info: true,
  size: 1,
  outputType: "jpeg",
  canScale: true,
  autoCrop: true,
  // 只有自动截图开启 宽度高度才生效
  autoCropWidth: 300,
  autoCropHeight: 250,
  fixed: true,
  // 真实的输出宽高
  infoTrue: true,
  fixedNumber: [4, 3],
});
const example3 = ref({
  img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
  autoCrop: true,
  autoCropWidth: 200,
  autoCropHeight: 200,
  fixedBox: true,
});
const downImg = ref("#");
const previewStyle1 = ref({});
const previewStyle2 = ref({});
const previewStyle3 = ref({});
const previewStyle4 = ref({});
const code0 = ref("");
const code1 = ref("");
const code2 = ref("");
const code3 = ref("");
const preview3 = ref("");

const changeImg = () => {
  option.img = lists[~~(Math.random() * lists.length)].img;
};
const startCrop = () => {
  // start
  crap = true;
  $refs.cropper.startCrop();
};
const stopCrop = () => {
  //  stop
  crap = false;
  $refs.cropper.stopCrop();
};
const clearCrop = () => {
  // clear
  $refs.cropper.clearCrop();
};
const refreshCrop = () => {
  // clear
  $refs.cropper.refresh();
};
const changeScale = (num) => {
  num = num || 1;
  $refs.cropper.changeScale(num);
};
const rotateLeft = () => {
  $refs.cropper.rotateLeft();
};
const rotateRight = () => {
  $refs.cropper.rotateRight();
};
const finish = (type) => {
  // 输出
  // var test = window.open('about:blank')
  // test.document.body.innerHTML = '图片生成中..'
  if (type === "blob") {
    $refs.cropper.getCropBlob((data) => {
      var img = window.URL.createObjectURL(data);
      model = true;
      modelSrc = img;
    });
  } else {
    $refs.cropper.getCropData((data) => {
      model = true;
      modelSrc = data;
    });
  }
};
// 实时预览函数
const realTime = (data) => {
  var previewsValue = data;
  var h = 0.5;
  var w = 0.2;
  previewStyle1.value = {
    width: previewsValue.w + "px",
    height: previewsValue.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: h,
  };
  previewStyle2.value = {
    width: previewsValue.w + "px",
    height: previewsValue.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: w,
  };
  previewStyle3.value = {
    width: previewsValue.w + "px",
    height: previewsValue.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / previewsValue.w,
  };
  previewStyle4.value = {
    width: previewsValue.w + "px",
    height: previewsValue.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / previewsValue.h,
  };
  previews.value = data;
};
const finish2 = (type) => {
  cropper2.value.getCropData((data) => {
    model = true;
    modelSrc = data;
  });
};
const finish3 = (type) => {
  cropper3.value.getCropData((data) => {
    model = true;
    modelSrc = data;
  });
};
const down = (type) => {
  // event.preventDefault()
  // 输出
  if (type === "blob") {
    cropper.value.getCropBlob((data) => {
      downImg.value = window.URL.createObjectURL(data);
      if (window.navigator.msSaveBlob) {
        var blobObject = new Blob([data]);
        window.navigator.msSaveBlob(blobObject, "demo.png");
      } else {
        nextTick(() => {
          downloadDom.value.click();
        });
      }
    });
  } else {
    cropper.value.getCropData((data) => {
      downImg.value = data;
      if (window.navigator.msSaveBlob) {
        var blobObject = new Blob([data]);
        window.navigator.msSaveBlob(blobObject, "demo.png");
      } else {
        nextTick(() => {
          downloadDom.value.click();
        });
      }
    });
  }
};
const doUploadImg = (e, num) => {
  //上传图片
  // option.img
  var file = e.target.files[0];
  if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
    const alert = "图片类型必须是.gif,jpeg,jpg,png,bmp中的一种";
    return false;
  }
  var reader = new FileReader();
  reader.onload = (e) => {
    let data;
    if (typeof e.target.result === "object") {
      // 把Array Buffer转化为blob 如果是base64不需要
      data = window.URL.createObjectURL(new Blob([e.target.result]));
    } else {
      data = e.target.result;
    }
    if (num === 1) {
      option.img = data;
    } else if (num === 2) {
      example2.img = data;
    }
    uploadImg.value = "";
  };
  // 转化为base64
  // reader.readAsDataURL(file)
  // 转化为blob
  reader.readAsArrayBuffer(file);
};
const imgLoad = (msg) => {
  console.log(msg);
};
const cropMoving = (data) => {
  option.cropData = data;
};

onMounted(() => {
  changeImg();
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  margin: auto;
  max-width: 1200px;
  margin-bottom: 100px;
}
.test-button {
  display: flex;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c0ccda;
  color: #1f2d3d;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 20px 10px 0px 0px;
  padding: 9px 15px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #50bfff;
  border-color: #50bfff;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
}
.des {
  line-height: 30px;
}
code.language-html {
  padding: 10px 20px;
  margin: 10px 0px;
  display: block;
  background-color: #333;
  color: #fff;
  overflow-x: auto;
  font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans,
    Type, Writer, Ubuntu, Mono;
  border-radius: 5px;
  white-space: pre;
}
.show-info {
  margin-bottom: 50px;
}
.show-info h2 {
  line-height: 50px;
}
/*.title, .title:hover, .title-focus, .title:visited {
		color: black;
	}*/
.title {
  display: block;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  margin: 20px 0px;
  background-image: -webkit-linear-gradient(
    left,
    #3498db,
    #f47920 10%,
    #d71345 20%,
    #f7acbc 30%,
    #ffd400 40%,
    #3498db 50%,
    #f47920 60%,
    #d71345 70%,
    #f7acbc 80%,
    #ffd400 90%,
    #3498db
  );
  color: transparent;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  animation: slide 5s infinite linear;
  font-size: 40px;
}
.test {
  height: 500px;
}
.model {
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}
.model-show {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
}
.model img {
  display: block;
  margin: auto;
  max-width: 80%;
  width: auto;
  user-select: none;
  background-position: 0px 0px, 10px 10px;
  background-size: 20px 20px;
  background-image: linear-gradient(
      45deg,
      #eee 25%,
      transparent 25%,
      transparent 75%,
      #eee 75%,
      #eee 100%
    ),
    linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}
.c-item {
  display: block;
  padding: 10px 0;
  user-select: none;
}
.pre {
  display: flex;
  flex-wrap: wrap;
}
.pre-item {
  padding-right: 20px;
}
@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@media screen and (max-width: 1000px) {
  .content {
    max-width: 90%;
    margin: auto;
  }
  .test {
    height: 400px;
  }
}
</style>
